/*
 * @Date: 2025-05-06 09:21:39
 * @LastEditors: lyx
 * @LastEditTime: 2025-05-14 09:01:25
 * @FilePath: \tpt-cnpc\src\components\Conversation\ChatFeedModal\index.tsx
 * @Description: 
 */
import React, { useEffect, useState } from "react";
import { Input, Button, Modal } from "antd";
import { useTranslation } from "react-i18next";
import "./index.less";
import { isEndingWithPunctuation } from "@/utils/utils";
interface IProps {
  open: boolean;
  onCancel: () => void;
  onOk: (feedDes: string) => void;
}

// Component State
const ChatFeedModal: React.FC<IProps> = ({ open, onOk, onCancel }) => {
  const { t } = useTranslation();
  const [feedDes, setFeedDes] = useState<string>("");
  const defaultFeed = [
    "格式问题",
    "逻辑问题",
    "有害信息",
    "事实错误",
    "没有帮助",
    "答非所问",
  ];
  // Component Effect
  useEffect(() => {
    setFeedDes("");
  }, [open]);
  return (
    <Modal
      open={open}
      title="评价反馈"
      onCancel={onCancel}
      footer={null}
      className="chat-feed-modal"
      zIndex={5000}
    >
      <div className="chat-point-body">
        <div className="chat-point-area">
          <div className="chat-point-title">
            <span>反馈内容</span>
          </div>
          <div className="chat-point-content">
            <Input.TextArea
              placeholder="请输入反馈内容"
              value={feedDes}
              autoSize={{ minRows: 5, maxRows: 5 }}
              maxLength={500}
              onChange={(e) => {
                setFeedDes(e.target.value);
              }}
            ></Input.TextArea>
          </div>
        </div>
        <div className="rela-area">
          {defaultFeed.map((item, index) => {
            return (
              <div
                className="rela-item"
                key={index}
                onClick={() => {
                  const addText =
                    isEndingWithPunctuation(feedDes) || !feedDes
                      ? item
                      : `，${item}`;
                  const resText = feedDes + addText;
                  setFeedDes(resText);
                }}
              >
                {item}
              </div>
            );
          })}
        </div>
        <div className="btn-aera">
          <div
            className="btn-item"
            onClick={() => {
              onCancel();
            }}
          >
            <Button>取消</Button>
          </div>
          <div
            className="btn-item"
            onClick={() => {
              onOk(feedDes);
            }}
          >
            <Button type="primary">确认</Button>
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default ChatFeedModal;
